<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

<template>
  <div class="app">
    <!-- 在阅读页面隐藏全局导航栏 -->
    <div v-if="route.name !== 'Reader'" class="nav-bar">
      <router-link to="/">书架</router-link>
      <router-link to="/search">搜索</router-link>
      <router-link to="/download">下载</router-link>
      <router-link to="/source-manager">书源</router-link>
      <router-link to="/settings">设置</router-link>
    </div>
    <router-view v-slot="{ Component }">
      <keep-alive include="Download">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<style scoped>
.nav-bar {
  display: flex;
  background-color: #4a90e2;
  padding: 10px 20px;
}

.nav-bar a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-bar a:hover, .nav-bar a.router-link-active {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>
